<?php
  $this->headScript()
          ->appendFile($this->layout()->staticBaseUrl . 'application/modules/Wall/externals/scripts/autocompleter/wall-autocompleter.js');
?>
<script type="text/javascript">

  // Populate data
  var maxRecipients = <?php echo sprintf("%d", $this->maxRecipients) ?> || 10;
  var to = {
    id : false,
    type : false,
    guid : false,
    title : false
  };
  var isPopulated = false;

  <?php if( !empty($this->isPopulated) && !empty($this->toObject) ): ?>
    isPopulated = true;
    to = {
      id : <?php echo sprintf("%d", $this->toObject->getIdentity()) ?>,
      type : '<?php echo $this->toObject->getType() ?>',
      guid : '<?php echo $this->toObject->getGuid() ?>',
      title : '<?php echo $this->string()->escapeJavascript($this->toObject->getTitle()) ?>'
    };
  <?php endif; ?>

  function changeShareType(type){
      if (type=='me'){
          document.getElementById('to-element').setStyle('display', 'none');
          document.getElementById('to-wrapper').setStyle('display', 'none');
          document.getElementById('toValues-element').setStyle('display', 'none');
          document.getElementById('toValues-wrapper').setStyle('display', 'none');
          document.getElementById('wall_privacy').setStyle('display', '');
          document.getElementById('composer_facebook_toggle').setStyle('display', '');
      } else {
          document.getElementById('to-element').setStyle('display', '');
          document.getElementById('to-wrapper').setStyle('display', '');
          document.getElementById('toValues-element').setStyle('display', '');
          document.getElementById('toValues-wrapper').setStyle('display', '');
          document.getElementById('wall_privacy').setStyle('display', 'none');
          document.getElementById('composer_facebook_toggle').setStyle('display', 'none');
      }
  }
  function removeFromToValue(id) {
    // code to change the values in the hidden field to have updated values
    // when recipients are removed.
    var toValues = document.getElementById('toValues').value;
    var toValueArray = toValues.split(",");
    var toValueIndex = "";

    var checkMulti = id.search(/,/);

    // check if we are removing multiple recipients
    if (checkMulti!=-1){
      var recipientsArray = id.split(",");
      for (var i = 0; i < recipientsArray.length; i++){
        removeToValue(recipientsArray[i], toValueArray);
      }
    }
    else{
      removeToValue(id, toValueArray);
    }

    // hide the wrapper for usernames if it is empty
    if (document.getElementById('toValues').value==""){
      document.getElementById('toValues-wrapper').setStyle('height', '0');
    }

    document.getElementById('to').disabled = false;
  }

  function removeToValue(id, toValueArray){
    for (var i = 0; i < toValueArray.length; i++){
      if (toValueArray[i]==id) toValueIndex =i;
    }

    toValueArray.splice(toValueIndex, 1);
    document.getElementById('toValues').value = toValueArray.join();
  }

  en4.core.runonce.add(function() {
    changeShareType(document.getElementById('shareto').get('value'));
    if( !isPopulated ) { // NOT POPULATED
      new WAutocompleter.Request.JSON('to', '<?php echo $this->url(array('module' => 'user', 'controller' => 'friends', 'action' => 'suggest'), 'default', true) ?>', {
        'minLength': 1,
        'delay' : 250,
        'selectMode': 'pick',
        'autocompleteType': 'message',
        'multiple': false,
        'className': 'message-autosuggest',
        'filterSubset' : true,
        'tokenFormat' : 'object',
        'tokenValueKey' : 'label',
        'injectChoice': function(token){
          if(token.type == 'user'){
            var choice = new Element('li', {
              'class': 'autocompleter-choices',
              'html': token.photo,
              'id':token.label
            });
            new Element('div', {
              'html': this.markQueryValue(token.label),
              'class': 'autocompleter-choice'
            }).inject(choice);
            this.addChoiceEvents(choice).inject(this.choices);
            choice.store('autocompleteChoice', token);
          }
          else {
            var choice = new Element('li', {
              'class': 'autocompleter-choices friendlist',
              'id':token.label
            });
            new Element('div', {
              'html': this.markQueryValue(token.label),
              'class': 'autocompleter-choice'
            }).inject(choice);
            this.addChoiceEvents(choice).inject(this.choices);
            choice.store('autocompleteChoice', token);
          }
            
        },
        onPush : function(){
          if( document.getElementById('toValues').value.split(',').length >= maxRecipients ){
            document.getElementById('to').disabled = true;
          }
        }
      });
      
      new Composer.OverText(document.getElementById('to'), {
        'textOverride' : '<?php echo $this->translate('Start typing...') ?>',
        'element' : 'label',
        'isPlainText' : true,
        'positionOptions' : {
          position: ( en4.orientation == 'rtl' ? 'upperRight' : 'upperLeft' ),
          edge: ( en4.orientation == 'rtl' ? 'upperRight' : 'upperLeft' ),
          offset: {
            x: ( en4.orientation == 'rtl' ? -4 : 4 ),
            y: 2
          }
        }
      });

    } else { // POPULATED

      var myElement = new Element("span", {
        'id' : 'tospan' + to.id,
        'class' : 'tag tag_' + to.type,
        'html' :  to.title /* + ' <a href="javascript:void(0);" ' +
                  'onclick="this.parentNode.destroy();removeFromToValue("' + toID + '");">x</a>"' */
      });
      document.getElementById('to-element').appendChild(myElement);
      document.getElementById('to-wrapper').setStyle('height', 'auto');

      // Hide to input?
      document.getElementById('to').setStyle('display', 'none');
      document.getElementById('toValues-wrapper').setStyle('display', 'none');
    }
  });
</script>

<style type="text/css">
#wall-wrapper {
    display: inline-block;
}
#shareto-wrapper{
    float:left;
}
#wall_privacy {
    display: inline-block;
}
#to-wrapper{
}
#to{
    margin-left: 10px;
    width: 160px;
}
#to-label{
    display:none;
}
#to-element .message-autosuggest{
    margin-left: 167px;
}
#toValues-wrapper{
    padding: 5px 0;
}
#toValues-label{
    display:none;
}
#lock {
    cursor: pointer;
    width: 20px;
    height: 12px;
    padding: 3px;
    display: block;
    text-align: center;
}

.lock_active {
    background: #3399ff url(./application/modules/Wall/externals/images/check.png) no-repeat;
}

#privacy {
    background: #FFF;
    display: none;
    z-index: 1000;
    position: fixed;
    margin-left: 0px;
    border: #000 solid 1px;
    width: 160px;
    max-height: 250px;
    overflow: auto;
}

#privacy tr:hover {
    background: #6D84B4;
    cursor: pointer;
}

#privacy td {
    padding: 3px;
}
#privacy td:hover {
    color: #FFF;
}

.check {
    background-image: url(./application/modules/Wall/externals/images/check.png);
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    font-weight: bold;
    display: none;
}
#share_form_popup textarea{
    width: 450px;
    height: 100px;
}
#share_form_popup * + ul.form-errors, * + ul.form-notices{
    margin-top: 0px !important;
}
#share_form_popup ul.form-errors, ul.form-notices{
    margin-bottom: 0px !important;
}
</style>
<div>
  <?php echo $this->form->setAttribs(array('class'=>'global_form_popup', 'id'=>'share_form_popup'))->render($this) ?>
  <div class="sharebox">
    <?php if( $this->attachment->getPhotoUrl() ): ?>
      <div class="sharebox_photo">
        <?php echo $this->htmlLink($this->attachment->getHref(), $this->itemPhoto($this->attachment, 'thumb.icon'), array('target' => '_parent')) ?>
      </div>
    <?php endif; ?>
    <div>
      <div class="sharebox_title">
        <?php echo $this->htmlLink($this->attachment->getHref(), $this->attachment->getTitle(), array('target' => '_parent')) ?>
      </div>      
      </div>
      <div class="sharebox_description">
        <?php echo $this->attachment->getDescription() ?>
      </div>
     
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
var toggleFacebookShareCheckbox = function(){
    document.getElementById('composer_facebook_toggle').toggleClass('composer_facebook_toggle_active');
    document.getElementsByName('post_to_facebook')[0].set('checked', document.getElementById('composer_facebook_toggle').hasClass('composer_facebook_toggle_active'));
}
var toggleTwitterShareCheckbox = function(){
    document.getElementById('composer_twitter_toggle').toggleClass('composer_twitter_toggle_active');
    document.getElementsByName('post_to_twitter')[0].set('checked', document.getElementById('composer_twitter_toggle').hasClass('composer_twitter_toggle_active'));
}
//]]>
</script>
<script type="text/javascript">
/*
    Document   : privacy
    Created on : Dec 11, 2010, 4:20:17 PM
    Author     : longdt
*/
var lock_status = false;
var privacy_set = 0;
var count_down = 1;
var old_privacy = 0;

showCheck(privacy_set, 1);
function setPrivacy(privacy)
{
    showCheck(old_privacy, 0);
    old_privacy = privacy;

    if (privacy > 2) {
        privacy_set = document.getElementById('txt_pri'+privacy).get('listid');
    } else {
        privacy_set = privacy;
    }
    
    showCheck(privacy, 1);
    document.getElementById('privacy').hide();
    document.getElementById('privacy_set').set('value', privacy_set);
}
function showCheck(privacy, status)
{
    if (status) {
        document.getElementById('pri'+privacy).show();
        document.getElementById('txt_pri'+privacy).setStyle("font-weight", "bold");
    } else {
        document.getElementById('pri'+privacy).hide();
        document.getElementById('txt_pri'+privacy).setStyle("font-weight", "normal");
    }
}
document.getElementById('lock').addEvent('click', function(){
    if (lock_status) count_down = 1;
    document.getElementById('privacy').toggle();
    //document.getElementById('privacy').toggle();
    if (!lock_status) {
        //document.getElementById('lock_img').set('src', './application/modules/Wall/externals/images/l2.png');
        //document.getElementById('lock').setStyle('background', '#6D84B4');
        document.getElementById('lock').setStyle('background', '#FFF');
    } else {
        document.getElementById('lock_img').set('src', './application/modules/Wall/externals/images/l1.png');
        document.getElementById('lock').setStyle('background', 'none');
    }
    lock_status = lock_status ? false : true;
});
document.addEvent('click', function() {
    if (lock_status && count_down <= 0) {
        document.getElementById('privacy').hide();
        document.getElementById('lock_img').set('src', './application/modules/Wall/externals/images/l1.png');
        document.getElementById('lock').setStyle('background', 'none');
        count_down = 1;
        lock_status = false;
    }
    else if (lock_status)
        count_down = (count_down <= 0) ? 0 : --count_down;
});
</script>